<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="diagram">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Arc Diagram</title>
</head>

<body>
<div id="canvas"></div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="../build/g2.js"></script>
<script>
  $.getJSON('./data/relationship-with-weight.json', data => {
    // arc diagram layout
    const ds = new DataSet();
    const dv = ds.createView().source(data, {
      type: 'graph',
      edges: d => d.links
    });
    dv.transform({
      type: 'diagram.arc',
      marginRatio: 0.5
//      sortBy: 'frequency' // id, weight, frequency, {function}
    });

    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight,
      padding: [ 120, 0, 120, 0 ]
    });
    chart.legend(false);
    chart.tooltip({
      showTitle: false
    });
    chart.scale({
      x: {
        sync: true
      },
      y: {
        sync: true
      }
    });

    const edgeView = chart.view();
    edgeView.source(dv.edges);
    edgeView.coord('polar').reflect('y');
    edgeView.axis(false);
    edgeView.edge()
      .position('x*y')
      .shape('arc')
      .color('source')
      .opacity(0.5)
      .tooltip('source*target');

    const nodeView = chart.view();
    nodeView.source(dv.nodes);
    nodeView.coord('polar').reflect('y');
    nodeView.axis(false);
    nodeView.point()
      .position('x*y')
      .shape('circle')
      .size('value')
      .color('id')
      .opacity(0.5)
      .style({
        stroke: 'grey'
      })
//      .label('name', { // label configuration for non-polar coord
//        offset: -10,
//        textStyle: {
//          textAlign: 'left',
//          rotate: 90,
//          fill: 'black',
//        }
//      });
      .label('name', {
        labelEmit: true,
        textStyle: {
          fill: 'black'
        }
      });

    chart.render();
  });
</script>
</body>

</html>

